<script setup>
import basic from '../apply/component/basic.vue'

const xinming ='张小白'
const xueyuan ='电子信息工程学院'
const nianji ='2025'
const zhuanye='电子信息工程专业'
const banji='202301班'
const shijian='2023/02/03 18:00:00'
const bool='是'
const yutian='1'
</script>

<template>
  <div class="main">
    <div class="top">
      <h1 class="h1">返校申请</h1>
      <div class="shang">
        <div>
          <img class="xiaolian" src="../../static/image/img/buxixi.png" alt="">
        </div>
        <div style="font-size: 12px">
          <div style="font-size: 22px;font-weight: bold;text-align: center">不通行状态</div>
          请完全返校申请后
          <br>
          可开启同行状态
        </div>
      </div>
      <div style="font-size: 12px;position: absolute;bottom: 45px;left: 55px;opacity: 0.5">
        若有疑问请联系辅导员，学校门禁系统问题联系保卫处
      </div>
    </div>

    <div class="xinxi">
      <div class="jianjie">
        <div style="position: absolute;top:15px;left: 17px">
          <div style="font-weight: bold;font-size: 20px">{{xinming}}提交的返校申请</div>
          <div style="opacity: 0.5">{{xueyuan}}</div>
        </div>
        <div>
          <img class="icon" src="../../static/image/img/2165@2x.png" alt="">
        </div>
      </div>
      <div class="jianjie" style="position: absolute;bottom: 10px;left: 17px;font-size: 12px;opacity: 0.5">
        所在年级：{{nianji}}<br>
        所在专业：{{zhuanye}}<br>
        所在班级：{{banji}}<br>
      </div>
    </div>
    <div class="liucheng">
      <div style="font-size: 14px;position: absolute;top: 8px;left: 17px">
        <div style="font-size: 12px;opacity: 0.5">返校申请</div>
        <div>{{shijian}}</div>
        <div>是否超过请假结束时间：{{bool}}</div>
        <div>超时{{yutian}}天</div>
      </div>
      <div class="xia">
        <div>关联请假记录</div>
        <div style="display: flex;float: right">
          <view class="anniu" @click="">查看记录></view>
          <!-- 用view>方法写到@click里面,不要写带边框的button -->
        </div>
      </div>
    </div>
    <div class="pizhun">
      <basic></basic>
      <!-- 直接引入即可,不需要写那么多 -->
    </div>
  </div>
  <div id="bottom_background">
    <button class="modify-btn">撤销申请</button>
  </div>
</template>

<style scoped>
.top{
  width: 100%;
  height: 270px;
  background-color: #D80000;
  border-radius: 0 0 20px 20px;
  position: relative;
  z-index: 1;
  color: #ffffff;
}

#bottom_background{
  display: flex;
  justify-content: center;
  margin-top: 70px;
}

.main{
  background-color: #f5f5f5;
  height: 884px;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
}
.xinxi{
  width: 90%;
  height: 157px;
  background: #fff;
  display: flex;
  float: left;
  z-index: 10;
  position: relative;
  align-items: center;
  justify-content: center;
  top: -30px;
  border-radius: 12px;
}
.liucheng{
  width: 90%;
  height: 162px;
  background: #fff;
  display: flex;
  float: left;
  z-index: 10;
  position: relative;
  flex: auto;
  top: -20px;
  box-shadow: 0 2px 4px #e6e6e64d;
  border-radius: 12px;
}
.pizhun{
  width: 90%;
  height: 257px;
  border-radius: 12px;
  box-shadow: 0 2px 4px #e6e6e64d;
  display: flex;
  float: left;
  z-index: 10;
  position: relative;
  flex: none;
  top: -5px;
}
.jianjie{
  height: 73.5px;
  width: 100%;
  float: left;
}
.icon{
  height: 60px;
  width: 60px;
  position: absolute;
  right: 16px;
  top: 8px;
}
.shang{
  display: flex;
  float: left;
  position: absolute;
  top: 116px;
  left: 76px;
}
.xiaolian{
  width: 60px;
  height: 60px;
}
.xia{
  width: 90%;
  display: flex;
  float: left;
  position: absolute;
  bottom: 13px;
  left: 15px;
}
.anniu{
  font-size: 14px;
  color: #6a6a6a;
  position: absolute;
  right: 12px;
}
#firstPerson{
  margin-left: 10px;
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

#name{
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 15px;
  text-align: left;
  color: #808080;
}

#surname{
  font-family: "PingFang SC Bold";
  color: #f8f8f8;
  width: 42px;
  height: 42px;
  border-radius: 58px;
  text-align: center;
  font-size: 25px;
  background: #2264ff;
}

#line_1{
  color: #8f939c;
  font-size: 13px;
  position: absolute;
  left: 10px;
}
#otherPerson{
  margin-top: 50px;
  margin-left: 10px;
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: space-between;
}
.h1{
  text-align: center;
}
/* 按钮样式 */
.modify-btn {
  width: 200px;
  height: 50px;
  background-color: #007bff;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}
.modify-btn:hover {
  background-color: #0056b3;
  box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3);
}
</style>